<script setup>
import { inject, ref, watch } from "vue";
import { useWebsiteStore } from "@/store";
const websiteStore = useWebsiteStore();
//变量
const { isShow, setIsShow } = inject("dialogShow");
const url = ref("");
const isSubmit = ref(false);
//函数
const { add } = websiteStore;
const handleAdd = async () => {
  isSubmit.value = true;
  const res = await myApi.sendUrl(url.value);
  isSubmit.value = false;
  if (res.msg) {
    myApi.alert("无法获取该网站,尝试在网址前加上http://");
  } else {
    add(res);
    setIsShow(false);
  }
};
watch(isShow, () => {
  url.value = "";
});
</script>

<template>
  <div
    class="dialog"
    v-show="isShow">
    <div class="content">
      <el-input
        class="input"
        v-model="url"
        placeholder="请输入网址"
        :disabled="isSubmit"
        @keyup.enter="handleAdd" />
      <div class="btns">
        <el-button
          type="primary"
          @click="handleAdd"
          :disabled="isSubmit || !url.length">
          添加
        </el-button>
        <el-button
          type="info"
          @click="setIsShow(false)"
          :disabled="isSubmit">
          取消
        </el-button>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.dialog {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: rgba(0, 0, 0, 0.8);
  display: flex;
  align-items: center;
  justify-content: center;
  .content {
    width: 100%;
    padding: 0 20px;
    .input {
      margin-bottom: 10px;
    }
  }
}
</style>
